<template>
    <div class="exam-box">
        <div class="exam-head">
            <el-form class="exam-head-form">
                <div class="head-title">考试列表</div>
                <div class="head-content">
                    <div class="head-content-left">
                        <el-form-item>
                            <el-select v-model="examHeadData.belongCourseId" class="select" placeholder="请选择课程">
                                <el-option v-for="course in examHeadData.courses" :label="course.label"
                                    :value="course.value" @click="getExamByCourseIdSemester(course.value)" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="examHeadData.semester" class="select" placeholder="请选择学期">
                                <el-option v-for="item in semesterData" :label="item.label" :value="item.value"
                                    @click="getExamBySemester()" />
                            </el-select>
                        </el-form-item>
                        <el-button type="primary" @click="createExam" plain><i class="iconfont icon-tianjia"></i>
                            创建考试</el-button>
                        <el-button type="danger" plain @click="deleteExams(examIds)" v-if="examIds.length > 0"><i
                                class="iconfont icon-shanchu"></i>批量删除</el-button>
                    </div>
                    <div class="head-content-right">
                        <el-input v-model="search" placeholder="请输入题目" class="input">
                            <template #append>
                                <el-button class="iconfont icon-sousuo3"></el-button>
                            </template>
                        </el-input>
                    </div>
                </div>
            </el-form>
        </div>
        <div class="exam-concent">
            <div class="table">
                <el-table :data="examTableDate" style="width: 100wh" @selection-change="selectExamId"
                    :header-cell-style="{ 'text-align': 'center', background: '#f0f4f7', color: '#606266' }"
                    max-height="430" :row-style="{ height: '5vh' }">
                    <el-table-column type="selection" width="35" align="center" />
                    <el-table-column label="序号" type="index" width="60" align="center" />
                    <el-table-column prop="examName" label="考试名称" max-width="230" min-width="140px" align="center"
                        :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="examBeginTime" label="开始时间" max-width="120" align="center" />
                    <el-table-column prop="examEndTime" label="结束时间" max-width="120" align="center" />
                    <el-table-column prop="creator" label="创建人" max-width="100" align="center" />
                    <el-table-column label="操作" align="center" min-width="90px">
                        <template #default="scope">
                            <el-button type="success" circle class="iconfont icon-sousuo1"
                                @click="checkExam(scope.row)" />
                            <el-button type="primary" circle class="iconfont icon-bianji"
                                @click="updateExam(scope.row)" />
                            <el-popconfirm width="120" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="deleteExam(scope.row)" title="确认删除?">
                                <template #reference>
                                    <el-button type="danger" circle class="iconfont icon-shanchu" />
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="exam-footer">
            <div class="question-foot">
                <el-pagination v-model:current-page="paginationData.pageNum" v-model:page-size="paginationData.pageSize"
                    :page-sizes="[20, 50, 100]" :small="paginationData.small" layout="sizes, prev, pager, next"
                    :total="Number(paginationData.total)" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" class="pagination" />
            </div>
        </div>
    </div>
</template>


<script setup>
import { ref, reactive, onMounted, } from 'vue';
import { getCourseListAPI, getCourseByIdAPI, getExamByCourseIdSemesterAPI, selectExamPaperAPI, deleteExamAPI, getExamDetailAPI } from '@/api/api'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';

const router = useRouter()

const search = ref('')
const examTableDate = ref()
const examHeadData = ref({
    //学期
    semester: '',
    //所属课程
    belongCourseId: '',
    //获取到的所有课程
    courses: [],
    //课程列表
    courseList: [],
})
//试卷分页
const paginationData = reactive({
    pageSize: 20,
    total: 0,
    pageNum: 1,
    background: false,
    disabled: false,
    small: '',
})
//学期
const semesterData = reactive([
    {
        label: '2022年上学期',
        value: '2022年上学期'
    },
    {
        label:'2022年下学期',
        value:'2022年下学期'
    },
    {
        label:'2023年上学期',
        value:'2023年上学期'
    },
    {
        label:'2023年下学期',
        value:'2023年下学期'
    },
    {
        label:'2024年上学期',
        value:'2024年上学期'
    },
    {
        label:'2024年下学期',
        value:'2024年下学期'
    },
])
onMounted(() => {
    //获取课程信息
    getCourseList()
})
//分页查询课程
const getCourseList = async () => {
    await getCourseListAPI().then(res => {
        if (res.data.code == 200) {
            examHeadData.value.courseList = res.data.data.list
            getCourseName(examHeadData.value.courseList)
            if (sessionStorage.getItem('examCourseId')) {
                getExamByCourseIdSemester(sessionStorage.getItem('examCourseId'))
                getCourseById(sessionStorage.getItem('examCourseId'))
            }
        }
    })
}
//获取课程名
const getCourseName = (courseList) => {
    for (let item of courseList) {
        examHeadData.value.courses.push({
            label: item.courseName,
            value: item.id
        })
    }
}
//根据课程id查询课程名（单查）
const getCourseById = async (id) => {
    await getCourseByIdAPI(id).then(res => {
        examHeadData.value.belongCourseId = res.data.data.courseName
    })
}
//当一页的数量改变
const handleSizeChange = (newPageSize) => {
    paginationData.pageSize = newPageSize
    getExamByCourseIdSemester(sessionStorage.getItem('examCourseId'))
}
//第几页
const handleCurrentChange = (newCurrentPage) => {
    paginationData.pageNum = newCurrentPage
    getExamByCourseIdSemester(sessionStorage.getItem('examCourseId'))
}
//根据课程id查询考试列表
const getExamByCourseIdSemester = async (id) => {
    sessionStorage.setItem('examCourseId', id)
    await getExamByCourseIdSemesterAPI(id, paginationData.pageNum, paginationData.pageSize, examHeadData.value.semester).then(res => {
        examTableDate.value = res.data.data.list
    })
}
//根据学期获取考试列表
const getExamBySemester = ()=>{
    if(sessionStorage.getItem('examCourseId')){
        getExamByCourseIdSemester(sessionStorage.getItem('examCourseId'))
    }else{
        ElMessage.warning('请先选择课程！')
    }
}
//创建考试
const createExam = () => {
    router.push('/adminHome/createExam')
}
const examIds = ref([]);
//批量获取知识点id
const selectExamId = (data) => {
    data = JSON.parse(JSON.stringify(data))
    examIds.value = []
    for (let item of data) {
        examIds.value.push(item.examId)
    }
    console.log(examIds.value);
}
//批量删除题目
const deleteExams = async (examIds) => {
    console.log(examIds, 'examIds');
    let ids = { "ids": examIds }
    await deleteExamAPI(ids).then(res => {
        if (res.data.code == 200) {
            ElMessage.success('删除成功')
            getExamByCourseIdSemester(sessionStorage.getItem('examCourseId'))
        }
    })
}
//单独删除试卷
const deleteExam = (row) => {
    const examId = []
    examId.push(row.examId)
    deleteExams(examId)
}
//编辑试卷按钮
const updateExam = (row) => {
    console.log(row);
    router.push({
        path: '/adminHome/createExam',
        query: {
            examId: row.examId
        }
    })

}
//查看试卷按钮
const checkExam = (row) => {
    console.log(row);
    router.push({
        path: '/adminHome/createExam',
        query: {
            examId: row.examId,
            check: 1
        }
    })
}

</script>

<style lang="less" scoped>
.exam-box {
    padding: 0;
    margin: 15px 0px 0 0;
    background-color: #fff;
    border-radius: 15px;

    .exam-head {
        min-height: 120px;
        border-radius: 15px;

        .exam-head-form {
            border-radius: 15px;
            padding-bottom: 5px;

            .head-title {
                font-size: 18px;
                font-weight: 550;
                color: grey;
                padding: 15px 10px;
            }

            .head-content {
                display: flex;
                justify-content: space-between;
                padding: 10px 25px 0 25px;

                .head-content-left {
                    display: flex;

                    .word {
                        padding: 0 5px;
                        font-size: 15px;
                    }

                    el-form-item {
                        padding: 0;
                        margin: 0;
                    }

                    .select {
                        width: 150px;
                        margin-right: 15px;
                    }

                    .btn {
                        border-radius: 23px;
                    }
                }

                .head-content-right {
                    display: flex;
                    height: 34px;

                    .icon-sousuo3:hover {
                        cursor: pointer;
                    }

                    // ::v-deep .el-input__wrapper {
                    //     border-radius: 23px;
                    // }
                }
            }
        }
    }

    .exam-concent {
        min-height: 65vh;
        overflow: scroll;

        .table {
            max-height: 65vh;
            min-height: 65vh;
            margin: auto;
            width: 1250px;
        }
    }

    .exam-footer {
        overflow: hidden;
        display: flex;
        justify-content: center;

        .question-foot {
            display: flex;
            justify-content: center;

            .pagination {
                margin-bottom: 10px;

            }

        }
    }
}
</style>